import React, { useState, useEffect } from 'react';
import { Table, Tag, Button } from 'antd';
import axios from 'axios';

const OrderHistory = () => {
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    const fetchOrders = async () => {
      try {
        const response = await axios.get('/api/orders/history');
        setOrders(response.data);
      } catch (error) {
        console.error('Error fetching orders:', error);
      }
    };

    fetchOrders();
  }, []);

  const columns = [
    {
      title: '订单号',
      dataIndex: 'orderNumber',
      key: 'orderNumber',
    },
    {
      title: '电影',
      dataIndex: 'movieTitle',
      key: 'movieTitle',
    },
    {
      title: '影院',
      dataIndex: 'cinemaName',
      key: 'cinemaName',
    },
    {
      title: '场次',
      dataIndex: 'showtime',
      key: 'showtime',
      render: (text) => new Date(text).toLocaleString(),
    },
    {
      title: '座位',
      dataIndex: 'seats',
      key: 'seats',
      render: (seats) => seats.join(', '),
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => {
        const statusMap = {
          PENDING: { color: 'gold', text: '待支付' },
          PAID: { color: 'green', text: '已支付' },
          COMPLETED: { color: 'blue', text: '已完成' },
          CANCELLED: { color: 'red', text: '已取消' },
          REFUNDED: { color: 'purple', text: '已退款' },
        };
        const { color, text } = statusMap[status] || { color: 'default', text: status };
        return <Tag color={color}>{text}</Tag>;
      },
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Button 
          type="link" 
          onClick={() => window.location.href = `/order/${record.orderNumber}`}
        >
          查看详情
        </Button>
      ),
    },
  ];

  return (
    <div style={{ padding: '24px' }}>
      <h2>订单历史</h2>
      <Table 
        columns={columns} 
        dataSource={orders} 
        rowKey="orderNumber"
        pagination={{ pageSize: 10 }}
      />
    </div>
  );
};

export default OrderHistory; 